<template>
    <div class="row product-list">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>商品信息</a></li>
                        <li><a>商品列表</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <el-form :inline="true" :model="queryForm" class="demo-form-inline" label-width="80px"
                             size="small">
                        <el-row>
                            <el-form-item label="商品名称">
                                <el-input v-model="queryForm.goodsName" placeholder="商品名称"></el-input>
                            </el-form-item>
                            <el-form-item label="商品分类">
                                <el-select v-model="queryForm.categoryId" placeholder="请选择" clearable>
                                    <el-option
                                        v-for="item in categoryList"
                                        :key="item.categoryId"
                                        :label="item.categoryName"
                                        :value="item.categoryId">
                                        <span style="float: left">{{ item.categoryName }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="入库日期">
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="queryForm.fromDate"
                                                    value-format="yyyy-MM-dd"
                                                    style="width: 100%;"></el-date-picker>
                                </el-col>
                                <el-col class="line" :span="2" style="text-align: center;font-size: 12px">到</el-col>
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="queryForm.toDate"
                                                    value-format="yyyy-MM-dd"
                                                    style="width: 100%;"></el-date-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item style="float: right;">
                                <a class="revision-btn" href="javaScript:void(0)" @click="onQuery">搜 索</a>&nbsp;&nbsp;
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="入库人">
                                <el-input v-model="queryForm.creatorName" placeholder="入库人"></el-input>
                            </el-form-item>
                            <el-form-item label="展出状态">
                                <el-select v-model="queryForm.status" placeholder="请选择" clearable>
                                    <el-option
                                        v-for="item in statusList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        <span style="float: left">{{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="促销状态">
                                <el-select v-model="queryForm.isRecommend" placeholder="请选择" clearable>
                                    <el-option
                                        v-for="item in recommendList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        <span style="float: left">{{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="float: right;">
                                <a class="revision-btn" href="javaScript:void(0)" @click="onReset">重 置</a>&nbsp;&nbsp;
                            </el-form-item>
                        </el-row>
                    </el-form>

                    <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                        <div class="alert alert-info" style="margin-bottom: 0px">
                            <a class="revision-btn" href="javaScript:void(0)" @click="addProduct()">新增</a>
                            <a class="revision-btn" href="javaScript:void(0)" @click="batchDeleteRow">批量删除</a>&nbsp;&nbsp;
                        </div>
                    </div>

                    <template v-if="data != null">
                        <el-table
                            ref="dataTable" class="list-table"
                            :data="data.list"
                            tooltip-effect="dark"
                            max-height="600px"
                            :border="true"
                            :header-cell-style="{'background-color': '#F5F5F6'}"
                            style="width: 100%">
                            <el-table-column type="selection" align="center"
                                             width="55">
                            </el-table-column>
                            <template v-for="columnName in columnNames">
                                <template v-if="columnName.prop === 'isRecommend'">
                                    <el-table-column align="center"
                                                     :label="columnName.label"
                                                     :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <i class="el-icon-close" style="color:#F00;"
                                               v-if="scope.row.isRecommend === 0"></i>
                                            <i class="el-icon-check" style="color:#1ab394;"
                                               v-if="scope.row.isRecommend === 1"></i>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'status'">
                                    <el-table-column align="center"
                                                     :label="columnName.label"
                                                     :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <span style="color:#F00;"
                                                  v-if="scope.row.status === 0">已下架</span>
                                            <span style="color:#1ab394;"
                                                  v-if="scope.row.status === 1">已上架</span>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'picUrl'">
                                    <el-table-column align="center"
                                                     :label="columnName.label"
                                                     :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <el-popover trigger="hover" placement="top">
                                                <div style="text-align: center;">
                                                    <img :src="scope.row.picUrl" class="image"
                                                         style="width: 200px;height:200px">
                                                </div>
                                                <div slot="reference" class="name-wrapper">
                                                    <img :src="scope.row.picUrl" class="image"
                                                         style="width: 36px;height:36px">
                                                </div>
                                            </el-popover>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'goodsName'">
                                    <el-table-column align="center"
                                                     :label="columnName.label"
                                                     :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <el-button type="text" style="font-size: 12px"
                                                       @click="getGoodsDetail(scope.row.goodsId)">
                                                {{scope.row.goodsName}}
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'price'">
                                    <el-table-column align="center"
                                                     :label="columnName.label"
                                                     :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <span style="color: #F00">{{scope.row.price}}</span>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'promotionPrice'">
                                    <el-table-column align="center"
                                                     :label="columnName.label"
                                                     :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <span style="color: #F00">{{scope.row.promotionPrice}}</span>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'stock'">
                                    <el-table-column align="center"
                                                     :label="columnName.label"
                                                     :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <span style="color: #F00">{{scope.row.stock}}</span>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else>
                                    <el-table-column align="center"
                                                     :label="columnName.label"
                                                     :prop="columnName.prop">
                                    </el-table-column>
                                </template>
                            </template>
                            <el-table-column align="center"
                                             fixed="right"
                                             label="操作"
                                             width="220">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="editGoodsDetail(scope.row.goodsId)" size="small">编辑
                                    </el-button>
                                    <el-button type="text" @click="onUpSell(scope.row.goodsId,scope.row.status)"
                                               size="small">
                                        <template v-if="scope.row.status === 0">上架</template>
                                        <template v-else>下架</template>
                                    </el-button>
                                    <el-button type="text" @click="onPromotion(scope.row.goodsId,scope.row.isRecommend)"
                                               size="small">
                                        <template v-if="scope.row.isRecommend === 0">促销</template>
                                        <template v-else>不促销</template>
                                    </el-button>
                                    <el-button type="text" @click="onDelRow(scope.row.goodsId)" size="small">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <el-pagination style="float: right;margin-top: 10px"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page.sync="data.currPage"
                                   :page-size="data.pageSize"
                                   layout="total, prev, pager, next"
                                   :total="data.totalCount">
                    </el-pagination>
                </div>
                <add-product-modal ref="addProductModal" :goodsId="goodsId" :showAddModal="showAddModal"
                                   @onSubmitNewModal="onSubmitNewModal"
                                   @onCancelNewModal="onCancelNewModal"></add-product-modal>
                <view-product-modal ref="viewProductModal" :goodsId="goodsId" :showAddModal="showViewModal"
                                    @onSubmitNewModal="onSubmitNewModal"
                                    @onCancelNewModal="onCancelNewModal"></view-product-modal>
                <confirm-modal :showConfirmModal="showConfirmModal" @closeModal="closeConfirmModal" :isSingle="isSingle"
                               @submitModal="submitBatchDeleteRow"></confirm-modal>
            </div>
        </div>
    </div>
</template>

<script>
    import AddProductModal from './addProductModal.vue';
    import ViewProductModal from './viewProductModal.vue';
    import ConfirmModal from "../../components/confirmModal";

    export default {
        name: 'ProductList',
        components: {ConfirmModal, AddProductModal, ViewProductModal},
        data() {
            return {
                categoryList: [],
                showAddModal: false,
                showViewModal: false,
                showConfirmModal: false,
                isSingle: false,
                queryForm: {
                    goodsName: '',
                    categoryId: '',
                    fromDate: '',
                    toDate: '',
                    status: '',
                    creatorName: '',
                    isRecommend: '',
                },
                columnNames: [{
                    label: '商品名称',
                    prop: 'goodsName',
                    width: 120
                }, {
                    label: '商品分类',
                    prop: 'category.categoryName',
                    width: 120
                }, {
                    label: '商品图片',
                    prop: 'picUrl',
                    width: 120
                }, {
                    label: '零售价格(元)',
                    prop: 'price',
                    width: 120
                }, {
                    label: '促销价格(元)',
                    prop: 'promotionPrice',
                    width: 120
                }, {
                    label: '库存',
                    prop: 'stock',
                    width: 120
                }, {
                    label: '基本单位',
                    prop: 'specsName',
                    width: 120
                }, {
                    label: '展出状态',
                    prop: 'status',
                    width: 120
                }, {
                    label: '促销状态',
                    prop: 'isRecommend',
                    width: 120
                }, {
                    label: '入库日期',
                    prop: 'createTime',
                    width: 120
                }, {
                    label: '入库人',
                    prop: 'creatorName',
                    width: 120
                }],
                multipleSelection: [],
                data: {},
                query: {
                    page: ''
                },
                statusList: [
                    {
                        value: 0,
                        label: '已下架'
                    },
                    {
                        value: 1,
                        label: '已上架'
                    }
                ],
                recommendList: [
                    {
                        value: 1,
                        label: '促销'
                    },
                    {
                        value: 0,
                        label: '不促销'
                    }
                ],
                ids: [],
                goodsId: '',
                updateData: {
                    id: 0,
                    recommend: '',
                    status: '',
                }
            }
        },
        mounted: function () {
            this.listAllCategory();
            this.listAllGoods();
        },
        methods: {
            addProduct() {
                this.showAddModal = true;
                this.goodsId = '';
            },
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                this.queryForm.page = val;
                this.listAllGoods(this.queryForm);
            },
            async listAllGoods(queryForm) {
                let res = await this.$api.get('/mall/goods/list', queryForm);
                if (res.code === 0) {
                    this.data = res.page;
                } else {
                    this.$message.error(res.msg);
                }
            },
            async listAllCategory() {
                let res = await this.$api.get('/mall/category/getAll', {});
                if (res.code === 0) {
                    this.categoryList = res.categoryList;
                } else {
                    this.$message.error(res.msg);
                }
            },
            onQuery() {
                this.listAllGoods(this.queryForm);
            },
            onReset() {
                this.queryForm = this.$options.data().queryForm;
                this.listAllGoods();
            },
            onCancelNewModal() {
                this.showAddModal = false;
                this.showViewModal = false;
                this.listAllGoods(this.queryForm);
            },
            onSubmitNewModal() {
                this.showAddModal = false;
                this.listAllGoods(this.queryForm);
            },
            batchDeleteRow() {
                let rows = this.$refs.dataTable.selection;
                if (rows.length === 0) {
                    this.$message.warning('请选择一条记录');
                    return;
                } else {
                    let ids = [];
                    for (let row of rows) {
                        ids.push(row.goodsId);
                    }
                    this.ids = ids;
                    this.showConfirmModal = true;
                }
            },
            closeConfirmModal() {
                this.showConfirmModal = false;
            },
            async submitBatchDeleteRow() {
                let res = await this.$api.post('/mall/goods/delete', this.ids);
                if (res.code === 0) {
                    this.ids = this.$options.data().ids;
                    this.$message.success('删除成功');
                    this.showConfirmModal = false;
                    this.listAllGoods(this.queryForm);
                } else {
                    this.$message.error(res.msg);
                }
            },
            onDelRow(id) {
                this.ids.push(id);
                this.isSingle = true;
                this.showConfirmModal = true;
            },
            onUpSell(id, status) {
                this.updateData = {};
                this.updateData.id = id;
                this.updateData.status = (status === 1) ? 0 : 1;
                this.updateGoogdsStatus();
            },
            onPromotion(id, isRecommend) {
                this.updateData = {};
                this.updateData.id = id;
                this.updateData.recommend = (isRecommend === 1) ? 0 : 1;
                this.updateGoogdsStatus();
            },
            getGoodsDetail(id) {
                this.goodsId = new String(id);
                this.$refs.viewProductModal.getInfo(id);
                this.showViewModal = true;
            },
            editGoodsDetail(id) {
                this.goodsId = new String(id);
                this.$refs.addProductModal.getInfo(id);
                this.showAddModal = true;
            },
            async updateGoogdsStatus() {
                let res = await this.$api.post('/mall/goods/updateStatus', this.updateData);
                if (res.code === 0) {
                    this.updateData = {};
                    this.$message.success('保存成功');
                    this.listAllGoods(this.queryForm);
                } else {
                    this.$message.error(res.msg);
                }
            },
        }
    }
</script>

<style scoped>
    .product-list .content-wrapper /deep/ .el-form-item__label {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #666;
        font-size: 12px;
        font-weight: normal;
    }
    .list-table {
        font-size: 12px;
    }
</style>
